<template>
  <div class="header">
    <div class="header_title">
      <span>叩丁狼商品管理系统</span>
      <span class="show" @click="isShow"> ∷ </span>
    </div>
    <div class="header_login">
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          {{ getUserName }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="a">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {

    };
  },
  methods: {
    isShow() {
      console.log(this.$store.state.isShow);
      this.$store.state.isShow = !this.$store.state.isShow;
    },
    // 跳转到登录界面
    handleCommand(command) {
      // console.log(command);
      localStorage.clear("token");
      this.$router.push("/login");
    },
  },
  computed: {
    getUserName() {
     return  this.$store.state.userInfo.username;
       
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  display: flex;
  height: 60px;
  background-color: #409eff;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  color: #fff;
  .header_title {
    font-size: 20px;
    .show {
      cursor: pointer;
      margin-left: 20px;
    }
  }
  header_login {
    font-size: 14px;
  }
  .el-dropdown{
    color:#fff
  }
}

</style>